<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单">
    <meta name="description" content="订单">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="js/qrcode.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
    <div class="wrapperbox ordershowpage hasmenu" id="app"  v-if="loaded==true">
        <section class="top">
            <div class="wrap">
                <div class="product">
                    <div class="img"><img :src="orderdata.product_cover_image" alt=""></div>
                    <div class="text">
                        <!--                        <h3>好物优选 | 金龙鱼玉米油油非转基因4升</h3>-->
                        <h3>{{orderdata.product_title}}</h3>
                        <p>套餐：{{orderdata.spec_name}}<i class="el-icon-close"></i>{{orderdata.quantity}}</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 一个订单 -->
        <section class="ordermsg" v-if="orderdata.tickets.length==1">
            <div class="wrap">
                <h3 class="tit">订单消费码</h3>
                <div class="code">
                    <div id="qrcodeOne" class="qrcode"></div>
                </div>
                <div class="msg">
                    <p><span>订单编号：<em>{{orderdata.order_no}}</em></span></p>
                    <p><span>核销码：<em>{{orderdata.tickets[0].ticket_no}}</em></span> <span v-if="orderdata.tickets[0].status.value=='consumed' " class="status" style="color: #D70000;">已使用</span></p>
                    <p><span>购买数量：<em>{{orderdata.quantity}}</em></span></p>
                    <p class="last"><span>产品有效期：</span><em>{{orderdata.start_date}}至{{orderdata.end_date}}</em></p>
                </div>
            </div>
        </section>
        <!-- 多个订单 -->
        <section class="ordermsg duo" v-if="orderdata.tickets.length>1">
            <div class="wrap">
                <h3 class="tit">订单消费码</h3>
                <div class="codebox">
                    <div class="row" v-for="(item,i) in orderdata.tickets">
                        <div class="line">
                            <span>核销码：<em>{{item.ticket_no}}</em></span> <span v-if="item.status.value=='consumed' " class="status" style="color: #D70000;">已使用</span> <img @click="opencode(i)" class="btn" src="images/codebtn2.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="msg">
                    <p><span>订单编号：<em>{{orderdata.order_no}}</em></span></p>
                    <p><span>购买数量：<em>{{orderdata.quantity}}</em></span></p>
                    <p class="last"><span>产品有效期：</span><em>{{orderdata.start_date}}至{{orderdata.end_date}}</em></p>
                </div>
            </div>
        </section>
        <section class="person" v-if="orderdata.customer">
            <div class="wrap">
                <h3 class="tit">个人信息</h3>
                <div class="text">
                    <p><span>姓名：</span><span>{{orderdata.customer.customer_name}}</span></p>
                    <p><span>手机号：</span><span>{{orderdata.customer.customer_mobile}}</span></p>
                </div>
            </div>
        </section>
        <section class="stores" v-if="orderdata.stores">
            <div class="wrap" v-if="orderdata.stores.length>0">
                <h3 class="tit">适用门店</h3>
                <div class="text">
                    <div class="row" v-for="item in orderdata.stores">
                        <p>{{item.name}}</p>
                        <p>{{item.address}}</p>
                        <a :href="'tel:'+item.phone_no"><img src="images/order-phone.png" alt=""></a>
                    </div>
                </div>
            </div>
        </section>
        <div class="bottom">
            <a class="cancel" :href="'./cancelorder.html?id='+orderdata.id">取消订单</a>
        </div>
        <div class="indexbotmenu">
            <a href="./index.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico1.png" alt=""></div>
                <p>首页</p>
            </a>
            <a href="./order.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico2.png" alt=""></div>
                <p>订单</p>
            </a>
            <a href="./my.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico3.png" alt=""></div>
                <p>我的</p>
            </a>
        </div>
        <div class="pop codepop">
            <div class="shadow"></div>
            <div class="wrap">
                <div class="close" @click="closecode"><img src="images/codepop-close.png" alt=""></div>
                <div class="content">
                    <div class="tit">我的核销二维码</div>
                    <div class="code">
                        <div id="qrcode" class="qrcode"></div>
                    </div>
                    <div class="tit">我的核销码</div>
                    <p>{{qrcodetxt}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var qrcode=null;
    new Vue({
        el: '#app',
        data () {
            return {
                orderid:0,
                orderdata:null,
                qrcodetxt:'',
                loaded:false,
            }
        },
        mounted () {
            
            var that=this;
            that.orderid=getUrlParam("id");
            that.getdata();
        },
        methods: {
            opencode:function(index){
                var that=this;
                if(qrcode!=null){
                    qrcode.clear();
                }
                that.$nextTick(function () {
                    that.makecode(index);
                })
            },
            closecode:function(e){
                var that=this;
                $('.codepop').fadeOut(500);
            },
            getdata:function(){
                var that=this;
                client_get('orders/'+that.orderid).then(res => {
                    console.log(res);
                    that.orderdata=res;
                    that.loaded=true;
                    if(that.orderdata.tickets.length==1){
                        that.$nextTick(function () {
                            that.makecodeOne();
                        })
                    }
                })
            },
            makecodeOne:function(){
                var that=this;
                that.qrcodetxt=that.orderdata.tickets[0].ticket_no;
                qrcode = new QRCode($('#qrcodeOne').get(0), {
                    text: that.qrcodetxt,
                    width: 128,
                    height: 128,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
            },
            makecode:function(num){
                var that=this;
                that.qrcodetxt=that.orderdata.tickets[num].ticket_no;
                qrcode = new QRCode($('#qrcode').get(0), {
                    text: that.qrcodetxt,
                    width: 128,
                    height: 128,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
                $('.codepop').fadeIn(500);
            },
        }
    });
</script>
</html>